<template>
	<navigatorComp title="留言" bgcColor="#121512" fontColor="#fff">
		<template #rightWrap>
			<view class="edit" @click="changeStatus">{{ isEdit ? '完成' : '留言管理' }}</view>
		</template>
	</navigatorComp>

	<view class="content">
		<mescroll-uni ref='mescrollRef' :height="height + 'px'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" @scroll="scroll" :down="downOption" :up="upOption">
			<view :class="['message', index % 2 === 1 && 'right']" v-for="(item, index) in messageList">
				<image class="avater" :src="item.userHeadUrl"></image>
				<view style="width: 100%;">
					<view class="top">
						<view>{{item.nickname}}</view>
						<view class="right" @click="setLike(item)">
							<image src="http://112.124.50.179:8888/imgs/chaoshan/zan.png" v-if="item.whetherLike==0||item.whetherLike==2">
							</image>
							<image src="http://112.124.50.179:8888/imgs/chaoshan/zan_check.png" v-else></image>
							<text style="padding-left: 10rpx;">{{item.likeNumber}}</text>
						</view>
					</view>
					<div class="info">
						{{item.message}}
					</div>
					<view class="time">{{ formatTimestamp(item.dateTimeStr) }}</view>
				</view>
				<image v-if="isEdit" src="http://112.124.50.179:8888/imgs/home/leaveMess_close.png" mode="" class="close"
					@click="closeMess(item)"></image>
			</view>
			<view class="safeArea" style="height: 100rpx"></view>
		</mescroll-uni>
	</view>
	<!-- <footerBtn class="footerBtn" name="留言" @clickBtn=""></footerBtn> -->

	<view class="footer">
		<view class="footerBox"></view>
		<view class="footerFixed">
			<up-input v-model.trim="message" placeholder="说点什么吧~" color="#fff" placeholderClass="placeholderClass"
				clearable shape="circle" border="none"
				custom-style="width: 542rpx;height: 72rpx;background: #333333;margin-right:24rpx"
				@confirm="sendMess"></up-input>
			<view class="sendBtn" @click="sendMess">发送</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue';
	import {
		onReady,
		onPageScroll,
		onReachBottom,
		onShow,
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		timeFormat
	} from '@/node_modules/uview-plus';
	import navigatorComp from '/components/navigator/index.vue'
	import footerBtn from '/components/footerBtn/index.vue'
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import HomeApi from '@/API/home/index.js'
	import { formatTimestamp } from '@/utils/time.js';
	import _ from "lodash"
	const homeApi = new HomeApi();
	const proxy = getCurrentInstance()
	const isEdit = ref(false);
	const message = ref('');
	//翻页信息
	const mescrollObj = ref(null); // mescroll实例
	let height = ref(0); //滚动区域
	let latestId = ref(0)
	const downOption = ref({
		// use: false
	});
	const {
		getMescroll,
		mescrollInit
	} = useMescroll() // 调用mescroll的hook
	const upOption = ref({
		// page: {
		// 	size: 10 // 每页数据的数量,默认10
		// },
		noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
		// empty: {
		// 	tip: '暂无相关数据'
		// },
		// onScroll: true
	});
	const messageList = ref([]);

	onMounted(() => {
		//计算滚动区域高度
		height.value = uni.getSystemInfoSync().windowHeight - uni.upx2px(180);
	});

	function removeTimezone(dateString) {
		const parts = dateString.split(' ');
		const result = parts.slice(0, 2).join(' ');
		return result;
	}

	/**
	 * 发送信息
	 */
	const sendMess = () => {
		homeApi.addMessageBoardApi({
			belongingTo: 1,
			correspondingId: JSON.parse(uni.getStorageSync('cemeteryItem')).memorialId,
			message: message.value
		}).then((res) => {
			latestId.value = 0
			getMescroll().resetUpScroll()
			message.value = '';
			scrollToBottom();
			uni.showToast({
				icon: 'none',
				title: res.msg
			})
		}).catch(() => {})

	};

	const setLike = _.throttle(function(item) {
		if (item.whetherLike == 1) {
			item.whetherLike = 0
			homeApi.likeMessageBoardApi({
				messageId: item.messageId,
				opType: 2
			}).then((res) => {
				item.likeNumber--
				uni.showToast({
					icon: 'none',
					title: res.msg
				})
			}).catch(() => {})
		} else {
			item.whetherLike = 1
			homeApi.likeMessageBoardApi({
				messageId: item.messageId,
				opType: 1
			}).then((res) => {
				item.likeNumber++
				uni.showToast({
					icon: 'none',
					title: res.msg
				})
			}).catch(() => {})
		}
	}, 1000);
	const scroll = (mescroll) => {
		console.log('当前滚动条的位置:' + mescroll.scrollTop + ', 是否向上滑:' + mescroll.isScrollUp)
	}

	// mescroll组件初始化的回调
	// const mescrollInit = (mescroll) => {
	// 	mescrollObj.value = mescroll
	// };

	// 滚动到最底部的方法，可以在需要的时候调用
	const scrollToBottom = () => {
		console.log(mescrollObj.value.scrollTo)
		mescrollObj.value.scrollTo('999', 300)
	};

	const upCallback = (mescroll) => {
		homeApi.getMessageBoardListApi({
			belongingTo: 1,
			correspondingId: JSON.parse(uni.getStorageSync('cemeteryItem')).memorialId,
			latestId: latestId.value
		}).then((res) => {
			const curPageData = res.data.messageBoardList || [] // 当前页数据
			if (latestId.value == 0) messageList.value = []
			curPageData.forEach((item) => {
				item.dateTimeStr = removeTimezone(item.dateTimeStr) || timeFormat(item.dateTimeStr,
					'yyyy-mm-dd hh:MM:ss');
				// if (item.userId == uni.getStorageSync('userInfo').userId) {
				// 	item.isSelf = true
				// }
			})
			messageList.value = messageList.value.concat(curPageData)
			if (curPageData.length) {
				latestId.value = curPageData[curPageData.length - 1].messageId || 0;
			}
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		}).catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		})
	}

	/**
	 * 下拉刷新
	 */
	const downCallback = (mescroll) => {
		latestId.value = 0
		getMescroll().resetUpScroll()
	};

	/**
	 * 点击留言管理
	 */
	const changeStatus = () => {
		isEdit.value = !isEdit.value;
	};

	/**
	 * 删除留言
	 */
	const closeMess = (item) => {
		homeApi.deleteMessageBoardApi({
			belongingTo: 1,
			correspondingId: JSON.parse(uni.getStorageSync('cemeteryItem')).memorialId,
			messageId: item.messageId
		}).then((res) => {
			latestId.value = 0
			getMescroll().resetUpScroll()
			message.value = '';
			scrollToBottom();
			uni.showToast({
				icon: 'none',
				title: res.msg
			})
		}).catch(() => {})
	};
</script>

<style lang="scss">
	page {
		background-color: #121512;
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
	}

	.content {
		background-color: #121512;
		padding: 0;
	}

	.edit {
		font-weight: 400;
		font-size: 32rpx;
		color: #f3e0bb;
		line-height: 32rpx;
		text-align: right;
	}

	.right {
		margin-left: calc(100% - 592rpx - 32rpx) !important;
	}

	.message {
		width: 592rpx;
		background: #333333;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 32rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		position: relative;
		margin: 32rpx;

		.avater {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			margin-right: 16rpx;
			flex-shrink: 0;
		}

		.time {
			color: #999999;
			font-size: 20rpx;
			margin-top: 16rpx;
		}

		.top {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 24rpx;
			margin-bottom: 16rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.right {
				display: flex;
				align-items: center;
			}
		}

		.info {
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 42rpx;
			text-align: justified;
		}

		.close {
			position: absolute;
			right: -20rpx;
			top: -20rpx;
			width: 48rpx;
			height: 48rpx;
			z-index: 99;
		}
	}

	.footer {
		width: 100%;
		z-index: 101 !important;

		.footerBox {
			width: 100%;
			height: calc(env(safe-area-inset-bottom) + 112rpx);
			background-color: #0e0e0e;
		}

		.footerFixed {
			position: fixed;
			background-color: #0e0e0e;
			bottom: 0;
			left: 0;
			width: 100%;
			height: calc(env(safe-area-inset-bottom) + 112rpx);
			z-index: 1000;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16rpx 32rpx;
			padding-bottom: calc(env(safe-area-inset-bottom) + 8rpx);
			box-sizing: border-box;
		}

		.placeholderClass {
			font-size: 26rpx;
			color: #c5c5c5;
			line-height: 33rpx;
			font-style: normal;
			text-transform: none;
		}

		::v-deep .u-input {
			padding: 0 40rpx !important;
			font-size: 26rpx;
			color: #fff;
			line-height: 33rpx;
		}

		.sendBtn {
			width: 120rpx;
			height: 64rpx;
			background: #f3e0bb;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #0e0e0e;
			line-height: 64rpx;
			text-align: center;
		}
	}
</style>